<template>
<div>
  <div style="height: 100px;background: coral">
    <div style="width: 500px;float: left;margin-top: 30px" ><font size="5" color="white">{{username}}(余额:{{yue}})</font><i class="el-icon-refresh" style="font-size: 30px;cursor: pointer" @click="checkMoney()"></i></div>
    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=395181822,3460984070&fm=26&gp=0.jpg"style="width: 100px;height: 100px;float: right">
  </div>
  <div> <el-carousel :interval="4000" type="card"  height="200px" :autoplay="false">
    <el-carousel-item v-for="item in list" :key="item.moeny" >
      <h3 class="medium"><div style="width: 250px;margin: auto;height: 100px"  @click="prix(item.moeny)"><font size="6" color="orange">{{ item.fish }}</font><font size="6" color="red">&yen;{{item.moeny}}</font></div></h3>
    </el-carousel-item>
  </el-carousel></div>
  <div align="center"> <el-button type="danger" round style="width: 200px;height: 50px;font-size: 20px" @click="buy()">立即充值</el-button></div>
</div>
</template>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background: wheat;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: blanchedalmond;
}
</style>
<script>
import axios from 'axios'
axios.defaults.withCredentials=true;
export default {
  name: "recharge",
  data(){
    return{
      rate:"",
      username:'',
      yue:'',
      payForm:'',
      list:[{fish:"1鱼翅",
             moeny:1},
        {fish:"10鱼翅",
          moeny:10},
        {fish:"50鱼翅",
          moeny:50},
        {fish:"100鱼翅",
          moeny:100},
        {fish:"500鱼翅",
          moeny:500},
        {fish:"1000鱼翅",
          moeny:1000}]
    }
  },
  methods:{
    prix(number){
      this.rate=number;
    },
    buy(){
    axios.post("http://localhost:7000/live-pay/pay/payment",{
      money:this.rate,
      fishBall:"鱼翅"
    }).then(res=>{
      this.payForm=res.data;
      const div = document.createElement('div');
      div.innerHTML = res.data;
      document.body.appendChild(div);
      document.forms[0].submit();
      // this.$nextTick(() => {
      //   this.$refs.payForm.children[0].submit();
      // })
    })
    },
    checkMoney(){
      axios.get("http://localhost:7000/live-pay/pay/checkMoney").then(res=>{
        if(res.data.code==200){
          this.yue=res.data.data.uMoney;
        }
      })
    }
  },
  mounted() {
    var data=JSON.parse( localStorage.getItem("data"));
    if(data!=null){
      this.username=data.username;
      this.yue=data.money;
    }
  }

}
</script>

<style scoped>

</style>
